<template>
	<view class="container">
		<view class="payment-info">
			<text class="payment-title">待支付金额：</text>
			<text class="payment-amount">￥{{ amount }}</text>
		</view>

		<view class="payment-methods">
			<button @click="handleOnlinePayment" class="online-payment">线上支付</button>
			<button @click="handleOfflinePayment" class="offline-payment">线下支付</button>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetailByIdAPI,
		updateOrderStateAPI
	} from '../../../api/common';
	import {confirmTouristInfoAPI} from '../../../api/user'
	export default {
		data() {
			return {
				amount: 123.45, // 示例金额
				orderId: ''
			};
		},
		onLoad(option) {
			this.orderId = option.orderId
			this.getAmount(this.orderId)
		},
		methods: {
			//线上支付更改状态为待支付
			async handleOnlinePayment() {
				// uni.navigateTo({
				// 	url: '/pages/user/PendingPayment/pay?amount=' + this.amount + '&orderId=' + this.orderId
				// })
				await confirmTouristInfoAPI(this.orderId, '待支付')
				uni.switchTab({
					url: '/common/pages/order/order'
				})
			},
			handleOfflinePayment() {
				uni.showToast({
					icon: 'success',
					title: '支付成功'
				})
				this.updateOrderState(this.orderId, '待出行')
				uni.switchTab({
					url: '/common/pages/order/order'
				})
			},
			async updateOrderState(orderId, state) {
				await updateOrderStateAPI(orderId, state)
			},
			async getAmount(orderId) {
				const res = await getOrderDetailByIdAPI(orderId)
				console.log('temp: ',res);
				this.amount = res.data.total
			}

		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		padding: 20px;
		background-color: #f5f5f5;
	}

	.payment-info {
		margin-bottom: 30px;
		text-align: center;
	}

	.payment-title {
		font-size: 20px;
		font-weight: bold;
	}

	.payment-amount {
		font-size: 24px;
		color: #ff4d4f;
		margin-top: 10px;
	}

	.payment-methods {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	button {
		width: 80%;
		padding: 15px;
		font-size: 18px;
		color: #fff;
		background-color: #007aff;
		border: none;
		border-radius: 5px;
		margin-bottom: 15px;
	}

	button.online-payment {
		background-color: #1aad19;
		/* 绿色按钮表示线上支付 */
	}

	button.offline-payment {
		background-color: #1e90ff;
		/* 蓝色色按钮表示线下支付 */
	}
</style>